<template>
  <div
      class="pixel-box"
      :class="{'select':select}"
      :style="{'background':backgroundColor,'width':pWidth,'height':pHeight }">
    <div v-if="select" class="select-point" :style="{background:selectColor}" :class="{'my':my}"></div>
    <!--    <div :style="{'background':defBorderColor}" class="border up"></div>-->
    <!--    <div :style="{'background':defBorderColor}" class="border down"></div>-->
    <!--    <div :style="{'background':defBorderColor}" class="border left"></div>-->
    <!--    <div :style="{'background':defBorderColor}" class="border right"></div>-->
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, computed} from 'vue'

let props = defineProps<{
  select: boolean,
  backgroundColor: string,
  selectColor: string,
  my: boolean,
  width: number,
  height: number
}>()
let pWidth = computed(() => props.width + 'px')
let pHeight = computed(() => props.height + 'px')
let defBorderColor = ref("#646464");
</script>
<style scoped lang="scss">
.pixel-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: solid 1px rgba(100, 100, 100, 0.2);
  border-bottom: solid 1px rgba(100, 100, 100, 0.2);
  //transition: all 10ms;


  &:hover {
    opacity: 0.8;
  }

  &.select {
    z-index: 100;
    opacity: 0.9;

    .select-point {
      width: 30%;
      height: 30%;
      border-radius: 100%;
      animation: neon2 1.5s ease-in-out infinite alternate;

      &.my {
        width: 60%;
        height: 60%;
        border-radius: 100px;

      }
    }
  }

  .border {
    opacity: 0.5;
  }

  .up {
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    transform: scaleY(0.5);
    left: 0;
    top: 0;
  }

  .down {
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scaleY(0.5);
  }

  .left {
    width: 1px;
    height: 100%;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleX(0.5);
  }

  .right {
    width: 1px;
    height: 100%;
    background: #000;
    right: 0;
    top: 0;
    position: absolute;
    transform: scaleX(0.5);
  }
}

@-webkit-keyframes neon2 {
  from {
    box-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #228DFF,
    0 0 70px #228DFF,
    0 0 80px #228DFF,
    0 0 100px #228DFF,
    0 0 150px #228DFF;
  }
  to {
    box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #228DFF,
    0 0 35px #228DFF,
    0 0 40px #228DFF,
    0 0 50px #228DFF,
    0 0 75px #228DFF;
  }
}
</style>
